<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>APICloud APP</title>
        <link rel="stylesheet" type="text/css" href="../css/api.css" />
        <style>
            html,
            body {
                height: 100%;
                background-color: #f0f0f0;
            }
            
            .empty>img {
                float: left;
                padding-left: 20px;
                height: 124px;
            }
            
            .empty>span {
                height: 124px;
                line-height: 124px;
                padding-left: 20px;
            }
            
            .h80 {
                height: 80px;
            }
            
            .h40 {
                height: 40px;
            }
            
            .h20 {
                height: 20px;
            }
            
            .h10 {
                height: 10px;
                background: #f0f0f0;
            }
            
            .hightitem {
                background-color: #fff;
            }
            
            .home-tuan-list .item {
                position: relative;
                display: block;
                padding-left: 10px;
                border-bottom: 1px solid #e0e0e0;
            }
            
            .home-tuan-list .cnt {
                padding: 7px 10px 10px 0;
                display: box;
                display: -webkit-box;
                min-height: 78px;
                background-size: auto 1px;
            }
            
            .home-tuan-list .pic {
                margin-right: 10px;
                background: center;
            }
            
            .home-tuan-list img {
                width: 90px;
                height: 66px;
                margin-top: 7px;
                margin-bottom: 5px;
                border-radius: 3px;
            }
            
            .home-tuan-list .wrap {
                -webkit-box-flex: 1;
            }
            
            .home-tuan-list .wrap2 {
                display: table;
                height: 88px;
                width: 100%;
            }
            
            .home-tuan-list .content {
                -webkit-box-flex: 1;
                box-flex: 1;
                display: table-cell;
                vertical-align: middle;
            }
            
            .home-tuan-list .shopname {
                color: #333;
                /*line-height: 16px;*/
                font-size: 17px;
                max-width: 11em;
                white-space: nowrap;
                word-wrap: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                min-height: 10px;
                padding-bottom: 2px;
                padding-top: 3px;
                display: inline-block;
            }
            
            .home-tuan-list .title {
                color: #666;
                line-height: 16px;
                font-size: 13px;
                max-height: 30px;
                overflow: hidden;
                padding-top: 3px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            
            .home-tuan-list .hot-title {
                margin-bottom: 8px;
            }
            
            .home-tuan-list .hot-subtitle {
                margin-bottom: 9px;
            }
            
            .home-tuan-list .info {
                margin-top: 9px;
                /*margin-bottom: 11px;*/
                color: #666;
                font-size: 12px;
                position: relative;
                line-height: 15px;
                display: box;
                display: -webkit-box;
                height: 15px;
            }
            
            .home-tuan-list .symbol {
                font-size: 14px;
                color: #f60;
                display: block;
                margin-top: 1px;
            }
            
            .home-tuan-list .price {
                color: #f60;
                font-size: 20px;
                line-height: 15px;
                margin-right: 5px;
                margin-top: 1px;
            }
            
            .home-tuan-list .o-price {
                color: #999;
                margin-top: 5px;
                line-height: 10px;
            }
            
            .home-tuan-list .sale {
                color: #f63;
                border: solid 1px #ff916e;
                padding: 3px 2px 2px;
                font-size: 10px;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                margin-left: 5px;
                line-height: 10px;
                height: 10px;
            }
            
            .home-tuan-list .distance {
                -webkit-box-flex: 1;
                box-flex: 1;
                -ms-box-flex: 1;
                -ms-flex: 1;
                text-align: right;
                line-height: 10px;
                margin-top: 5px;
                color: #999;
                float: right;
                font-size: 12px;
            }
            
            .home-tuan-list .price,
            .index-rec .home-tuan-list .o-price,
            .index-rec .home-tuan-list .distance,
            .index-rec .home-tuan-list .sale {
                display: block;
                line-height: 15px;
                font-size: 12px;
            }
            
            .Fix:after {
                display: block;
                content: '';
                height: 0;
                clear: both;
            }
            
            .item-hov {
                opacity: 0.7;
            }
        </style>
    </head>

    <body>
        <section id="empty" class="empty">
            <img src="../image/home/no_message.png">
            <span>暂无消息</span>
        </section>
        <section id="list" class="home-tuan-list"></section>
    </body>
    <script type="text/template" id="template">
        {{~ it:data }}
        <div class="item Fix hightitem open-win" win="shop" param='{"shopId":"{{= data.id }}","price":{{= data.price }},"shopName":"{{= data.shopName }}"}'>
            <div class="cnt">
                <img id="thumbnail_{{= data.id }}" class="pic" src="../image/default.jpg">
                <div class="wrap">
                    <div class="wrap2">
                        <div class="content">
                            <div class="shopname">{{= data.shopName}}</div>
                            <span id="distance_{{= data.id }}" class="distance"></span>
                            <div class="title">{{= data.shopDescription }}</div>
                            <div class="info">
                                <span class="symbol">¥</span>
                                <span class="price">{{= data.price }}</span> {{~ data.sales:sales }}
                                <span class="sale">{{= salesType[sales] }}</span> {{~}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{~}}
    </script>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
    <script type="text/javascript" src="../script/SHA1.js"></script>
    <script type="text/javascript" src="../script/doT.min.js"></script>
    <script type="text/javascript" src="../script/localdb.js"></script>
    <script type="text/javascript" src="../script/remotedb.js"></script>
    <script type="text/javascript" src="../script/list.js"></script>
    <script type="text/javascript">
        apiready = function() {
            fnInitList('shop');
            fnInit();

            fnInitLocal();

            fnSelectHistory(function(ret, err) {
                if (ret.status && ret.data.length > 0) {
                    empty.style.display = "none";
                    list.style.display = "block";
                    var inq = [];
                    for (var i = 0; i < ret.data.length; i++) {
                        inq.push(ret.data[i].shopId);
                    }

                    where = {
                        id: {
                            inq: inq
                        }
                    }

                    fnGetList(true);
                } else {
                    empty.style.display = "block";
                    list.style.display = "none";
                }
            });
        };

        var empty;

        function fnInit() {
            empty = $api.byId('empty');
        };
    </script>

</html>
